<template>
	<!-- 导航栏 -->
	<view>
		<!-- 顶部占位 -->
		<view class="placeholder"></view>
		<!-- 自定义导航栏 -->
		<view class="head">

		</view>

		<!-- 占位 -->
		<view class="top">
			<text>首页</text>
			<input type="text" value="" placeholder="搜索相关信息" />
			<image src="../../static/home/mes.png" class="nav-img"></image>
			<image src="../../static/home/add.png" class="nav-img"></image>
		</view>
		<!-- 轮播图 -->
		<swiper class="swiper_top" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item class="swiper">
				<image class="swiper_img" src="../../static/home/runplay.png"></image>
			</swiper-item>
		</swiper>

		<!-- 二级导航 -->
		<view class="sec_navAll">
			<view class="sec_nav">
				<view class="sn_icon" v-for="item in sec_navData" :key='item.id'>
					<image :src="item.imageSrc" class="sn_img"></image>
					<view class="sn_text"><text>{{item.name}}</text></view>
				</view>
			</view>
		</view>
		<!-- 标题栏 -->
		<view class="title">
			<text style="margin-left: 30rpx; font-size: 24rpx;color: #848484;">A股</text>
			<text style="margin-left: 10rpx;font-size: 24rpx;color: #848484">实时金价格</text>
			<text style="margin-left: 20rpx;font-size: 24rpx; color: #f85656;">373.00</text>
			<text style="margin-left: 190rpx;font-size: 24rpx;color: #f85656;">-4.92</text>
			<text style="margin-left: 20rpx;font-size: 24rpx;color: #f85656;">-1.19%</text>
		</view>

		<!-- 财富直通车 -->
		<view class="money_car">
			<view class="mc_text">财富直通车<text></text></view>
			<view class="mc_box">
				<view class="mcb_left">
					<view class="mcbl_text" style="margin-top: 22rpx;"><text
							style="font-size: 40rpx;color: #ffffff;font-weight: bold;">钱袋子保卫战</text></view>
					<view class="mcbl_text" style="margin-top: 24rpx;"><text
							style="font-size:24rpx;color: #ffffff;font-weight: bold;">领取你的避坑宝典</text></view>
					<view class="mcbl_text" style="margin-top: 10rpx;"><text
							style="font-size:24rpx;color: #ffffff;font-weight: bold;">还可</text><text
							style="font-size:28rpx; color:#be7f22;font-weight: bold;">参加有奖互动</text></view>
					<view class="mcbl_text" style="margin-top: 20rpx;"><text
							style="font-size:24rpx;color: #ffffff;font-weight: bold;">3月5日-3月8日</text></view>
					<view class="mcblt_join"><text> 立即参与</text><text>〉</text></view>
				</view>
				<view class="mcb_right">
					<view class="mcbr_left">
						<view class="mcbrl_text" style="margin-top: 24rpx;"><text
								style="font-size: 28rpx;color: #ffffff;font-weight: bold;">牛年有金喜</text></view>
						<view class="mcbrl_text"><text
								style="font-size: 24rpx;color: #dcfffa;font-weight: bold;">每天抽2021元红包</text></view>
						<view class="mcbrr_join"><text> 立即抢购</text><text>〉</text></view>
					</view>
					<view class="mcbr_right" style="margin-top: 20rpx;">
						<view class="mcbrr_text" style="margin-top: 24rpx;"><text
								style="font-size: 28rpx;color: #ffffff;font-weight: bold;">瓜分一吨黄金</text></view>
						<view class="mcbrr_text"><text style="font-size: 24rpx;color: #dcfffa;font-weight: bold;">年终福利 人人有份</text></view>
						<view class="mcbrr_join"><text> 立即抢购</text><text>〉</text></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 贷款服务 -->
		<view class="loans">
			<view class="loans_top"><text>贷款服务</text></view>
			<view class="loans_box">
				<view class="loansb_top">
					<text style="margin-right: 20rpx;font-size: 28rpx;color: #333333;">轻松贷款</text>
					<text style="margin-right: 10rpx;font-size: 24rpx;color:#999999;">最低日利率0.02%</text>
					<text
						style="border-left: 2rpx solid #ccc;padding-left: 10rpx;font-size: 24rpx;color:#999999;">快速提现</text>
				</view>
				<view class="loans_bottom">
					<view class="loans_left">
						<text style="font-size: 44rpx;color: #f85656;font-weight: bold;">200,000,00</text>
						<view><text>最高可借额度（元）</text></view>
					</view>
					<view class="loans_right">
						<text>获取我的额度</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 王牌理财热销榜 -->
		<view class="money_management">
			<view class="mm_top"><text>王牌理财热销榜</text><text style="color: #999999;"> 〉</text></view>
			<view class="mm_middle">
				<text class="mmm_text mmm_textenter">短期精选</text>
				<text class="mmm_text">保险理财</text>
				<text class="mmm_text">稳健理财</text>
				<text class="mmm_text">基金爆品</text>
			</view>
			<view class="mm_bottom">
				<view class="mmb_top">
					<view class="mmbt_top">
						<text style="margin-left:30rpx ;margin-right: 10rpx;font-size: 28rpx #333333;">活期理财</text>
						<text style="margin-right: 20rpx;font-size: 28rpx #333333;">国金众赢货币</text>
						<view class="mmbtt_text"><text>优选货基</text></view>
					</view>
					<view class="mmbt_middle" style="border-bottom: 2rpx solid #CCCCCC;">
						<view class="mmbtm_left">
							<text style="font-size: 44rpx;color: #f85656;font-weight: bold;">3.90 <text
									style="font-size: 28rpx;color: #f85656;font-weight: bold;">%</text></text>
							<view class="mmbtml_b"><text>七日年化收益率</text></view>
						</view>
						<view class="mmbtm_center">
							<text
								style="font-size: 32rpx;color: #333333;font-weight: bold;margin-bottom: 20rpx;">灵活申赎</text>
							<view class="mmbtml_b" style="margin-top: 20rpx;"><text>低风险 100元起购</text></view>
						</view>
						<view class="mmbtm_right">
							<text>去抢购</text>
						</view>
					</view>
				</view>
				<view class="mmb_bottom">
					<view class="mmbb_top">
						<text style="margin-left:30rpx ;margin-right: 10rpx;font-size: 28rpx #333333;">报价回购</text>
						<text style="margin-right: 20rpx;font-size: 28rpx #333333;">中信建投固收宝</text>
						<view class="mmbtt_text"><text>低风险</text></view>
						<view class="mmbtt_text" style="margin-left: 10rpx;"><text>100元起</text></view>
					</view>
					<view class="mmbb_middle">
						<view class="mmbbm_top">
							<text style="font-size: 44rpx;color: #f85656;font-weight: bold;">6.00<text
									style="font-size: 28rpx;color: #f85656;font-weight: bold;">%</text></text>
							<view><text>约定年化收益率</text></view>
						</view>
						<view class="mmbbm_center">
							<text
								style="font-size: 32rpx;color: #333333;font-weight: bold;margin-bottom: 20rpx;">28天</text>
							<view style="margin-top: 20rpx;">先开户 再购买</view>
						</view>
						<view class="mmbbm_bottom">
							<text>去抢购</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 爆款推荐 -->
		<view class="recommend">
			<view class="recommend_top">
				<text>爆款推荐</text>
				<text style="color: #999999;">〉</text>
			</view>
			<view class="recommend_bottom">
				<scroll-view scroll-x="true" class="scroll" enable-flex='true'>
					<view class="scroll_text">
						<view style="margin-top: 26rpx;"><text
								style="font-size: 28rpx;color: #333333;font-weight: bold;">天宏永利债券B</text></view>
						<view style="margin-top: 26rpx;"><text
								style="font-size: 44rpx;color: #f85656;font-weight: bold;">15.05 <text
									style="font-size: 24rpx;">%</text></text></view>
						<view style="margin-top: 20rpx;"><text style="font-size: 24rpx;color: #999999;">近一年涨幅</text>
						</view>
						<view class="st_bottom">
							<view class="scb_btn_l"><text>严控风险</text></view>
							<view class="scb_btn_r"><text>债券型</text></view>
						</view>
					</view>
					<view class="scroll_text">
						<view style="margin-top: 26rpx;"><text
								style="font-size: 28rpx;color: #333333;font-weight: bold;">个人天天盈2号</text></view>
						<view style="margin-top: 26rpx;"><text
								style="font-size: 44rpx;color: #f85656;font-weight: bold;">3.85 <text
									style="font-size: 24rpx;">%</text></text></view>
						<view style="margin-top: 20rpx;"><text style="font-size: 24rpx;color: #999999;">上日年化</text>
						</view>
						<view class="st_bottom">
							<view class="scb_btn_l"><text>一万元起购</text></view>
							<view class="scb_btn_r"><text>稳健性</text></view>
						</view>
					</view>
					<view class="scroll_text">
						<view style="margin-top: 26rpx;"><text
								style="font-size: 28rpx;color: #333333;font-weight: bold;">天宏永利债券B</text></view>
						<view style="margin-top: 26rpx;"><text
								style="font-size: 44rpx;color: #f85656;font-weight: bold;">15.05 <text
									style="font-size: 24rpx;">%</text></text></view>
						<view style="margin-top: 20rpx;"><text style="font-size: 24rpx;color: #999999;">近一年涨幅</text>
						</view>
						<view class="st_bottom">
							<view class="scb_btn_l"><text>严控风险</text></view>
							<view class="scb_btn_r"><text>债券型</text></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 理财优选 -->
		<view class="optimization">
			<view class="optimization_text">
				<text>理财优选</text>
			</view>
			<view class="optimization_bottom">
				<view class="ob_left">
					<view><text style="font-size: 44rpx;color: #f85656;font-weight: bold;">3.90 <text
								style="font-size: 28rpx;color: #f85656;font-weight: bold;">%</text></text></view>
					<view class="obl_title"><text>业绩比较基准</text></view>
				</view>
				<view class="ob_right">
					<view class="obr_text"><text>远见开放19号（TG01190...</text></view>
					<view class="obr_title">
						<view class="obrt_l"><text>1万元起购</text></view>
						<view class="obrt_c"><text>稳健收益</text></view>
						<view class="obrt_r"><text>净值型</text></view>
					</view>
				</view>
			</view>
			<view class="optimization_bottom2">
				<view class="ob_left">
					<view><text style="font-size: 44rpx;color: #f85656;font-weight: bold;">3.90 <text
								style="font-size: 28rpx;color: #f85656;font-weight: bold;">%</text></text></view>
					<view class="obl_title"><text>业绩比较基准</text></view>
				</view>
				<view class="ob_right">
					<view class="obr_text"><text>远见半年开放4号</text></view>
					<view class="obr_title">
						<view class="obrt_l"><text>1万元起购</text></view>
						<view class="obrt_c"><text>稳健收益</text></view>
						<view class="obrt_r"><text>净值型</text></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 财富头条 -->
		<view class="wealth">
			<view class="wealth_title">
				<text>财富头条</text>
			</view>
			<view class="wealth_box" v-for="item in wealthData" :key='item.id'>
				<view class="wb_top">
					<view class="wb_left">
						<view class="wbl_text">
							<view class="wbl_top">
								<image :src="item.headImage" style="width: 56rpx;height: 56rpx;vertical-align: middle;">
								</image>
								<text style="vertical-align: middle;">{{item.name}}</text>
							</view>
							<view class="wbl_middle">
								<text>{{item.title}}</text>
							</view>
							<view class="wbl_bottom">
								<text>{{item.mainContents}}</text>
							</view>
						</view>
					</view>
					<view class="wb_right">
						<image :src="item.image" style="width: 200rpx;height: 200rpx;"></image>
					</view>
				</view>
				<view class="wb_bottom">
					<view class=""><text style="font-size: 24rpx;color: #999999;">为你推荐•</text><text
							style="font-size: 24rpx;color: #666666;">12小时前</text></view>
					<view class="">...</view>
				</view>
			</view>
		</view>
		<view class="bottom_text">
			<text>{{text}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sec_navData: [],
				wealthData: [],
				pageSize: 1,
				total: null,
				text:'加载更多...'
			}
		},
		onReachBottom() {
			//触底加载
			this.pageSize++;
			if (this.total >= this.pageSize) {
				this.getWealth()
			} else {
				uni.showToast({
					title: '没有更多了',
					duration: 2000
				});
				this.text='没有更多了'
				
			}

		},
		methods: {
			//获取导航信息
			async getnavData() {
				const res = await this.$request({
					url: '/sys/navigation/info'
				})
				this.sec_navData = res.data
			},
			//获取财富头条信息
			async getWealth() {
				const res = await this.$request({
					url: '/sys/fortuneheadlines/info',
					method: 'POST',
					data: {
						pageNum: 1,
						pageSize: this.pageSize,
						username: "",
					}
				})
				this.wealthData = res.data.list
				this.total = res.data.total
			}
		},
		onLoad() {
			//获取导航信息
			this.getnavData();
			this.getWealth();
		},

	}
</script>

<style scoped lang="scss">
	.placeholder {
		height: var(--status-bar-height);
		background-color: #3476f1;
	}

	// 头部
	.head {
		height: 150rpx;
		width: 750rpx;
		background-color: #3476f1;
		padding-bottom: 150rpx;
		border-bottom-left-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		z-index: 20;

	}

	.top {
		z-index: 20;
		height: calc(130rpx + var(--status-bar-height));
		width: 750rpx;
		box-sizing: border-box;
		padding-top: var(--status-bar-height);
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		align-content: center;
		flex-wrap: wrap;
		background-color: #3476f1;

		text {
			font-size: 44rpx;
			color: #fff;
			margin-left: 20rpx;
			font-weight: bolder;
			vertical-align: middle;
		}

		input {
			font-size: 24rpx;
			color: #ccc;
			background-color: #fff;
			width: 445rpx;
			height: 60rpx;
			border-radius: 50rpx;
			padding-left: 54rpx;
			box-sizing: border-box;
			background-image: url(@/static/wealth/19.png);
			background-repeat: no-repeat;
			background-size: 24rpx;
			background-position: 16rpx 50%;
			vertical-align: middle;
		}
	}

	/* //财富头条 */
	.bottom_text {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		text-align: center;
		font-size: 25rpx;
		font-weight: bold;
		color: #e7e7e7;
	}

	.wealth {
		margin-bottom: 30rpx;
	}

	.wealth_box {
		border: 2rpx solid #CCCCCC;
		margin-top: 30rpx;
		border-radius: 10rpx;
	}

	.wb_top {
		padding: 0 24rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.wb_bottom {
		padding: 0 24rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		margin-bottom: 18rpx;
	}

	.wbl_top {

		font-size: 28rpx;
		color: #999999;
	}

	.wbl_bottom {
		width: 405rpx;
		font-size: 24rpx;
		color: #333333;
		margin-top: 16rpx;
	}

	.wbl_middle {
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		margin-top: 22rpx;
	}

	/* //一级导航 */
	.nav {
		background-color: #3476f1;
		height: 270rpx;
		border-bottom-left-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		overflow: hidden;
	}

	.nav_all {
		display: flex;
		margin-top: 20rpx;
		align-items: center;
		height: 80rpx;

	}

	.nav-text {
		font-weight: bolder;
		font-size: 44rpx;
		margin: 0 30rpx;
		color: white;
		vertical-align: middle;
	}

	.nav-img {
		width: 48rpx;
		height: 48rpx;
		vertical-align: middle;
		margin-left: 18rpx;
		margin-top: 10rpx;
	}


	/* //轮播图 */
	.swiper_top {
		width: 750rpx;
		height: 240rpx;
		position: absolute;
		top: 200rpx;
	}

	.swiper_img {
		width: 702rpx;
		height: 240rpx;
		z-index: -1;
	}

	.swiper {
		width: 750rpx;
		text-align: center;
		height: 240rpx;
	}

	/* //二级导航 */
	.sec_navAll {
		width: 662rpx;
		background-color: #ffffff;
		margin: 0 44rpx;
	}

	.sec_nav {
		margin-top: 120rpx;
		display: flex;
		justify-content: space-evenly;
		flex-wrap: wrap;
	}

	.sn_img {
		width: 88rpx;
		height: 88rpx;
	}

	.sn_icon {
		height: 140rpx;
		margin: 0 15rpx;
		margin-top: 40rpx;
	}

	.sn_text {
		margin-top: 18rpx;
		width: rpx;
		text-align: center;
		font-size: 24rpx;
		color: #666666;
	}

	/* 标题 */
	.title {
		margin: 40rpx 25rpx;
		width: 700rpx;
		height: 80rpx;
		line-height: 80rpx;
		border: 2rpx solid #f9f9f9;
		box-shadow: 0 0 5rpx 5rpx #F9F9F9;
	}

	/* 财富直通车 */
	.wealth,
	.money_car,
	.money_management,
	.recommend,
	.optimization {
		margin: 0 24rpx;
		width: 702rpx;
	}

	.wealth_title,
	.mc_text,
	.loans_top,
	.mm_top,
	.recommend_top,
	.optimization_text {
		margin-top: 20rpx;
		border-left: 10rpx solid #3476f1;
		font-size: 32rpx;
		color: #000000;
		padding-left: 10rpx;
		font-weight: bolder;
	}

	.mc_box {
		display: flex;
		margin-top: 30rpx;
	}

	.mcb_right {
		width: 355rpx;
		height: 390rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.mcb_left {
		width: 350rpx;
		height: 390rpx;
		background-image: url(../../static/home/mc_left.png);
		background-size: cover;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

	.mcbr_left {
		width: 330rpx;
		height: 180rpx;
		background-image: url(../../static/home/mc-right1.png);
		background-size: cover;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.mcbr_right {
		width: 330rpx;
		height: 180rpx;
		background-image: url(../../static/home/mc-right2.png);
		background-size: cover;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.mcbrl_text,
	.mcbrr_text,
	.mcbl_text {
		margin-left: 24rpx;
	}

	.mcblt_join {
		display: flex;
		justify-content: space-evenly;
		margin-left: 24rpx;
		margin-top: 40rpx;
		width: 180rpx;
		height: 60rpx;
		background-color: #ff7846;
		line-height: 60rpx;
		border-radius: 50rpx;
		color: #ffffff;
		font-size: 26rpx;
		font-weight: bold;
	}

	.mcbrr_join {
		margin-top: 15rpx;
		display: flex;
		justify-content: space-evenly;
		margin-left: 24rpx;
		width: 174rpx;
		height: 48rpx;
		line-height: 48rpx;
		background-color: #FF7846;
		border-radius: 50rpx;
		font-size: 26rpx;
		color: #ffffff;
	}

	/* 贷款服务 */
	.loans {
		margin: 40rpx 24rpx;
		width: 702rpx;
	}

	.loans_box {
		margin-top: 24rpx;
		background-color: #f3f7fe;
		width: 702rpx;
		height: 220rpx;
		overflow: hidden;
	}

	.loansb_top,
	.loans_bottom {
		margin-left: 30rpx;
	}

	.loansb_top {
		margin-top: 28rpx;
	}

	.loans_bottom {
		display: flex;
		align-items: center;
		margin-top: 50rpx;
	}

	.loans_left {
		width: 240rpx;
		height: 90rpx;
		font-size: 24rpx;
		color: #999999;

	}

	.loans_right {
		width: 210rpx;
		height: 60rpx;
		background-color: #4592ef;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 60rpx;
		text-align: center;
		margin-left: 200rpx;
		border-radius: 4rpx;
	}

	/* 王牌理财热销榜 */
	.mm_top {
		display: flex;
		justify-content: space-between;
	}

	.mm_middle {
		display: flex;
		justify-content: space-between;
		margin-top: 16rpx;
	}

	.mmm_text {
		width: 144rpx;
		height: 48rpx;
		text-align: center;
		line-height: 48rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.mmm_textenter {
		font-size: 28rpx;
		font-weight: bold;
		color: #ffffff;
		background-color: #3476f1;
		border-radius: 10rpx;
	}

	.mm_bottom {
		margin-top: 20rpx;
		border: 2rpx solid #fafafa;
		box-shadow: 0 0 5rpx 5rpx #f9f9f9;
	}

	.mmbtt_text {
		width: 104rpx;
		height: 36rpx;
		text-align: center;
		line-height: 36rpx;
		background-color: #f5ecde;
		color: #dab680;
		font-size: 20rpx;
		font-weight: bold;
	}

	.mmbt_top,
	.mmbb_top {
		margin-top: 30rpx;
		display: flex;
		align-items: center;

	}

	.mmbt_middle,
	.mmbb_middle {
		margin: 30rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #999999;
		height: 200rpx;

	}

	.mmbtm_right,
	.mmbbm_bottom {
		width: 174rpx;
		height: 64rpx;
		line-height: 64rpx;
		color: #ffffff;
		font-size: 28rpx;
		background-color: #3476f1;
		text-align: center;
		border-radius: 4rpx;

	}


	/* 爆款推荐 */
	.recommend {
		margin-bottom: 40rpx
	}

	.recommend_top {
		display: flex;
		justify-content: space-between;
	}

	.recommend_bottom,
	.scroll {
		width: 702rpx;
	}

	.recommend_bottom {
		overflow: hidden;
		white-space: nowrap;
	}

	.scroll_text {
		display: inline-block;
		margin-top: 30rpx;
		width: 300rpx;
		height: 300rpx;
		text-align: center;
		border: 2rpx solid #f8f8f8;
		box-shadow: 0 0 5rpx 5rpx #f8f8f8;
	}

	.st_bottom {
		display: flex;
		justify-content: space-around;
		margin-top: 26rpx;
	}

	.scb_btn_l,
	.scb_btn_r {
		width: 118rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background-color: rgba(52, 115, 241, 0.1);
		font-size: 20rpx;
		color: #3476f1;
	}

	.scb_btn_r {
		width: 86rpx;
	}

	/* 理财优选 */
	.optimization_bottom,
	.optimization_bottom2 {
		box-sizing: border-box;
		padding: 0 30rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		border: 2rpx solid #f8f8f8;
		box-shadow: 0 0 5rpx 5rpx #f8f8f8;
		align-items: center;
		height: 152rpx;
	}

	.optimization_bottom2 {
		margin-top: 2rpx;
	}

	.obl_title {
		margin-top: 26rpx;
		font-size: 22rpx;
		color: #999999;
	}

	.obr_title {

		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;

	}

	.obrt_l,
	.obrt_c,
	.obrt_r {
		width: 116rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 20rpx;
		color: #3476f1;
		background-color: rgba(52, 115, 241, 0.1);
	}

	.obrt_c {
		width: 102rpx;
	}

	.obrt_r {
		width: 82rpx;
	}

	.ob_right {
		width: 400rpx;
	}
</style>
